<template>
  <div>
    <el-card class="card-container">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="6">报销单基本信息</el-col>
      </el-row>
      <el-row>
        <baseTable :summaryInfo = "detailInfo.summaryInfo"></baseTable>
      </el-row>
      <reiTable :travelList="detailInfo.detailInfo" :applyType="detailInfo.summaryInfo.billType"></reiTable>
    </el-card>
    <el-card class="card-container">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="6">流程轨迹信息</el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table :data="detailInfo.trajectoryInfo" border style="width: 100%">
          <el-table-column prop="approvalName" label="审批人姓名"></el-table-column>
          <el-table-column prop="approvalEmail" label="审批人邮件" width="200"></el-table-column>
          <el-table-column prop="approvalStatus" label="审批状态"> </el-table-column>
          <el-table-column prop="approvalResult" label="审批意见"></el-table-column>
          <el-table-column prop="startTime" label="启动时间"></el-table-column>
          <el-table-column prop="completeTime" label="完成时间"></el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <el-row style="margin-top:20px;margin-bottom:20px;">
        <el-button class="back-btn" size="medium" type="primary" @click="clickBack">返回</el-button>
    </el-row>
  </div>
</template>

<script>
import { reiDetail } from "@/api/done/done";
import reiTable from "../../workflow/rei/detail/components/reiDetailTabel.vue";
import baseTable from "../../workflow/rei/detail/components/baseInfoTable.vue"

export default {
  name: "",
  props: [""],
  data() {
    return {
      rId:null,
      detailInfo:{
        summaryInfo:{
          billType:null
        }
      },
        radio:1,
        input:null,
      applyType: null,
      travelList: null,
    };
  },

  components: {
    reiTable,
    baseTable
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.rId = this.$route.query.rId;
    this.getDetailInfo();
  },

  methods: {
    getDetailInfo(){
       this.loading = true;
       let that = this;
      reiDetail(this.rId).then((response) => {
        that.detailInfo = response.data;
        that.detailInfo.trajectoryInfo.forEach(e => {
          let startTimeArr = e.startTime.split('T');
          e.startTime = startTimeArr[0];
          let endTimeArr = e.completeTime.split('T');
          e.completeTime = endTimeArr[0];
        });
        // that.travelList = this.detailInfo.detailInfo;
        // that.applyType = response.data.summaryInfo.billType;
        that.loading = false;
      });
    },
      clickBack(){
          
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.replace('/done/apply')
      }
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.card-container {
  width: 80%;
  margin-top: 20px;
  margin-left: 10%;
}

table,
th,
td {
  border: 1px solid #e6ebf5;
}

table {
  border-collapse: collapse;
  margin-top: 15px;
}

.table-item {
  margin: 5px;
  color: #606266;
  font-size: 14px;
  width: 100px;
}

.back-btn{
    margin-left: calc(50% - 35px);
}

.bottomCard-left{
    text-align: end;
    padding-right: 15px;
}
</style>